<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button class="btn">0</button><br />
    <button class="btn">1</button><br />
    <button class="btn">2</button><br />
    <button class="btn">3</button><br />

    <!-- 点击任何一枚按钮都能正确显示其序号 要求使用ES5语法 -->
    <!-- 使用多个函数闭包 各自存储各自的序号 -->
    <!-- <script>
      var btns = document.querySelectorAll("button");
      for (var i = 0; i < btns.length; i++) {
        /* 什么时候点击 就什么时候回调 */
        btns[i].onclick = function () {
          // 访问的是穿透了for作用域的全局变量i
          console.log(i);
        };
      }
      // 循环走完时 i恒为4
      console.log("循环走完", i);
    </script> -->

    <!-- 闭包解决方案 -->
    <script>
      var btns = document.querySelectorAll("button");
      for (var i = 0; i < btns.length; i++) {
        // 给第i个按钮绑定点击事件
        console.log(i);

        /* 
        以内层函数作为btn点击事件的回调函数 
        idx接收传入的参数 并锁死在闭包中
        循环4次=调用4次外层函数
        给外层函数传入序号 0 1 2 3
        返回值函数要作为点击事件的回调函数=>导致外层函数闭包无法释放
        调用4次 形成4个不同的闭包 各自有各自的idx
        */
        btns[i].onclick = (function (idx) {
            return function () {
                // 访问的是闭包内的idx
                console.log(idx);
            };
        })(i);
      }
    </script>
  </body>
</html>
